<!DOCTYPE html>
<html>
<head>
    <title>Fig. 2.71 Recreation</title>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="520"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // --- Parameters ---
        const centerX = 225;
        const topY = 60;
        const r1 = 45;
        const r2 = 90;
        const h = 250;
        const a = 40;
        const outerThick = 20;
        const mainLineWidth = 3;

        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';

        // --- Create Hatching Pattern ---
        const patternCanvas = document.createElement('canvas');
        const pCtx = patternCanvas.getContext('2d');
        const patternSize = 10;
        patternCanvas.width = patternSize;
        patternCanvas.height = patternSize;
        pCtx.strokeStyle = 'black';
        pCtx.lineWidth = 1.5;
        pCtx.beginPath();
        pCtx.moveTo(0, patternSize);
        pCtx.lineTo(patternSize, 0);
        pCtx.stroke();
        const hatchPattern = ctx.createPattern(patternCanvas, 'repeat');
        ctx.fillStyle = hatchPattern;

        // --- Draw Outer Conductor ---
        // We draw three filled and stroked rectangles to form the U-shape
        ctx.lineWidth = mainLineWidth;
        // Left Wall
        ctx.beginPath();
        ctx.rect(centerX - r2 - outerThick, topY, outerThick, h + a);
        ctx.fill();
        ctx.stroke();
        // Right Wall
        ctx.beginPath();
        ctx.rect(centerX + r2, topY, outerThick, h + a);
        ctx.fill();
        ctx.stroke();
        // Bottom Plate
        ctx.beginPath();
        ctx.rect(centerX - r2 - outerThick, topY + h, 2 * r2 + 2 * outerThick, a);
        ctx.fill();
        ctx.stroke();

        // --- Draw Inner Conductor ---
        ctx.beginPath();
        ctx.rect(centerX - r1, topY, 2 * r1, h);
        ctx.fill();
        ctx.stroke();

        // --- Draw Center Line ---
        ctx.save();
        ctx.lineWidth = 1.5;
        ctx.strokeStyle = 'black';
        ctx.beginPath();
        ctx.setLineDash([10, 3, 3, 3]); // Dash-dot pattern
        ctx.moveTo(centerX, topY - 30);
        ctx.lineTo(centerX, topY + h);
        ctx.stroke();
        ctx.restore();

        // --- Draw Input Line ---
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(centerX, topY);
        ctx.lineTo(centerX, topY - 30);
        ctx.stroke();

        // --- Draw Dimension Lines ---
        ctx.lineWidth = 1.5;
        ctx.fillStyle = 'black';
        ctx.font = 'italic 20px "Times New Roman"';
        const dimX = centerX + r2 + outerThick + 25;

        // h
        ctx.beginPath();
        ctx.moveTo(dimX, topY);
        ctx.lineTo(dimX, topY + h);
        ctx.moveTo(dimX - 5, topY);
        ctx.lineTo(dimX + 5, topY);
        ctx.moveTo(dimX - 5, topY + h);
        ctx.lineTo(dimX + 5, topY + h);
        ctx.stroke();
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.fillText('h', dimX + 10, topY + h / 2);

        // a
        ctx.beginPath();
        ctx.moveTo(dimX, topY + h);
        ctx.lineTo(dimX, topY + h + a);
        ctx.moveTo(dimX - 5, topY + h);
        ctx.lineTo(dimX + 5, topY + h);
        ctx.moveTo(dimX - 5, topY + h + a);
        ctx.lineTo(dimX + 5, topY + h + a);
        ctx.stroke();
        ctx.fillText('a', dimX + 10, topY + h + a / 2);

        // r1 and r2
        const r_y_start = topY + h + a + 10;
        const r1_y = r_y_start + 20;
        const r2_y = r_y_start + 45;

        // vertical guide from center
        ctx.beginPath();
        ctx.moveTo(centerX, topY + h + a);
        ctx.lineTo(centerX, r2_y + 5);
        ctx.stroke();

        // r1 bracket
        ctx.beginPath();
        ctx.moveTo(centerX, r1_y);
        ctx.lineTo(centerX - r1, r1_y);
        ctx.moveTo(centerX, r1_y - 5);
        ctx.lineTo(centerX, r1_y + 5);
        ctx.moveTo(centerX - r1, r1_y - 5);
        ctx.lineTo(centerX - r1, r1_y + 5);
        ctx.stroke();
        // r1 label
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('r', centerX - r1 - 22, r1_y);
        ctx.font = 'italic 14px "Times New Roman"';
        ctx.fillText('1', centerX - r1 - 15, r1_y + 4);
        ctx.font = 'italic 20px "Times New Roman"';

        // r2 bracket
        ctx.beginPath();
        ctx.moveTo(centerX, r2_y);
        ctx.lineTo(centerX - r2, r2_y);
        ctx.moveTo(centerX, r2_y - 5);
        ctx.lineTo(centerX, r2_y + 5);
        ctx.moveTo(centerX - r2, r2_y - 5);
        ctx.lineTo(centerX - r2, r2_y + 5);
        ctx.stroke();
        // r2 label
        ctx.fillText('r', centerX - r2 - 22, r2_y);
        ctx.font = 'italic 14px "Times New Roman"';
        ctx.fillText('2', centerX - r2 - 15, r2_y + 4);

        // --- Draw Points A and B ---
        ctx.font = '24px "Times New Roman"';
        ctx.fillStyle = 'black';
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        const pointX = centerX - (r1 + r2) / 2;

        // Point A
        const Ay = topY + h / 2.5;
        ctx.beginPath();
        ctx.arc(pointX, Ay, 3, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText('A', pointX + 8, Ay + 3);

        // Point B
        const By = topY + h - 30;
        ctx.beginPath();
        ctx.arc(pointX, By, 3, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText('B', pointX - 25, By + 3);

        // --- Draw Figure Caption ---
        ctx.font = 'bold 20px "Times New Roman"';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('Fig. 2.71', centerX, canvas.height - 10);

    </script>
</body>
</html>